window.tagInput = {
    delTag : function(obj) {
        obj.parent().remove();
        tagInput.refreshValue(obj.parent());
    },
    addTag : function(obj, trimEnd) {
        let tag = obj.val();
        if (trimEnd)
            tag = tag.substr(0, tag.length-1);
        obj.val('');
        obj.before("<span>" + tag + "<button type='button' onclick='tagInput.delTag($(this))'>×</button></span>"); //添加标签
        tagInput.refreshValue(obj.parent());
    },
    addDefaultTags : function(tags, val) {
        if (val == null || val === '')
            return;
        let tagvals = val.split(';');
        for (let tag of tagvals)
            tags.append("<span>" + tag + "<button type='button' onclick='tagInput.delTag($(this))'>×</button></span>");
    },
    refreshValue : function(tags){
        let strval = '';
        tags.children('span').each(function(){ strval += ($(this).text().replace(/×$/, '') + ';');});
        tags.children('input[type="hidden"]').val(strval.replace(/;$/, ''));
    }
};

$(function() {
    $(".tag-input").each(function(){
        let html = $(this)[0].outerHTML.replace(/<input/,"<div").replace(/input>/,"div>").replace(/(input[^><]*)\/>/,"$1></div>");
        $(this).replaceWith(html);
    });
    $(".tag-input").each(function(){
        let tags = $(this);
        let val = tags.attr('value');
        tagInput.addDefaultTags(tags, val);
        tags.append('<input type="text" autocomplete="off">');
        tags.append('<input type="hidden">');
        let val_input = tags.children('input[type="hidden"]');
        let sim_input = tags.children('input[type="text"]');
        val_input.attr('name', tags.attr('name'));
        val_input.attr('value', val);
        sim_input.attr('style', tags.attr('style'));
        let holder = tags.attr('placeholder');
        sim_input.attr('placeholder', (holder != null && holder !== '') ? holder : "多个值用分号或逗号隔开");
        let readonly = tags.attr('readonly');
        tags.removeAttr('type').removeAttr('name').removeAttr('placeholder').removeAttr('style');

        tags.click(function(){
            $(this).children('input[type="text"]').focus();
        });

        sim_input.focus(function() {
            $(this).parent().css({"box-shadow": "0 0 2px #7B9DD4"});
            $(this).parent().css({"border-color": "#7B9DD4"});
        }).blur(function() {
            $(this).parent().css({"box-shadow": ""});
            $(this).parent().css({"border-color": "darkgrey"});
            if($(this).val().length > 1)
                tagInput.addTag($(this), false);
        }).keyup(function(e) {
            if (/* e.keyCode === 13 || // enter
                e.keyCode === 32  || // space */
                e.keyCode === 186 ||  // separator
                e.keyCode === 188  // comma
            ){
                if ($(this).val().length > 1)
                    tagInput.addTag($(this), true);
            }
        });
    });
});